import { CaseConfigType } from '@shared';
import { BasicComponent } from './basic/basic.component';
import { PromptComponent } from './prompt/prompt.component';
import { MaxShowNumComponent } from './max-show-num/max-show-num.component';
import { UseInTableComponent } from './use-in-table/use-in-table.component';
import { Demo5Component } from './demo5/demo5.component';

export const OperationMenuConfig: CaseConfigType = {
  location: 'OperationMenu',
  description: 'OperationMenu',
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/operation-menu/basic/basic.component',
      demoTitle: '基础使用',
      demoTitle_en: 'Basic',
      demoDescription: '默认最多展示3项操作项，超过的操作项放入下拉菜单中。',
      demoDescription_en: `By default, a maximum of 3 operation items are displayed, and the operation items that exceed are put into the drop-down menu. `,
    },
    {
      demo: PromptComponent,
      codePath: 'showcase/operation-menu/prompt/prompt.component',
      demoTitle: '提示',
      demoTitle_en: 'Prompt',
      demoDescription: '操作项带提示。',
      demoDescription_en: 'Action item with prompt.',
    },
    {
      demo: MaxShowNumComponent,
      codePath: 'showcase/operation-menu/max-show-num/max-show-num.component',
      demoTitle: '最大显示个数',
      demoTitle_en: 'Maximum number of displays',
      demoDescription: `最大显示个数，包含下拉菜单。只显示一个操作项时，未配置lvMenuText时，默认显示更多icon`,
      demoDescription_en: `The maximum number of displayed items, including drop-down menus. When only one action item is displayed, if lvMenuText is not configured, more icons will be displayed by default.`,
    },
    {
      demo: UseInTableComponent,
      codePath: 'showcase/operation-menu/use-in-table/use-in-table.component',
      demoTitle: '表格',
      demoTitle_en: 'Table',
      demoDescription: '表格中使用。',
      demoDescription_en: `Use in table.`,
    },
    {
      demo: Demo5Component,
      codePath: 'showcase/operation-menu/demo5/demo5.component',
      demoTitle: '显示模式',
      demoTitle_en: 'show Mode',
      demoDescription: '显示模式',
      demoDescription_en: `Show Mode.`,
    },
  ],

  selector: 'lv-operation-menu',
  snippet: `<lv-operation-menu [lvItems]="\${1:item}" (lvItemClick)="\${2:onClick($event)}"></lv-operation-menu>`,
  mApi: [
    {
      name: 'OperationMenu',
      name_en: 'OperationMenu',
      selector: 'lv-operation-menu',
      api: [
        {
          attribute: 'lvItemsFn',
          type: '(data: any) => MenuItem[]',
          default: 'null',
          description: `获取操作项数据集，返回类型为MenuItem数组。`,
          description_en: `Gets the operation item data set, and the return type is MenuItem array.`,
        },
        {
          attribute: 'lvMaxShowNum',
          type: 'number',
          default: '3',
          description: `最大显示个数，包含下拉菜单。设置值小于1时，则显示1个。`,
          description_en: `Maximum number of display, including drop-down menu. When the setting value is less than 1, it will display 1.`,
          global: true,
        },
        {
          attribute: 'lvMenuText',
          type: 'string',
          default: '-',
          description: `下拉菜单上方显示文本。默认显示“更多”图标`,
          description_en: `Text displayed above the drop-down menu. The "More" icon is displayed by default`,
          global: true,
        },
        {
          attribute: 'lvShowMode',
          type: 'string',
          default: 'default',
          description: `操作菜单显示模式，default：按lvMaxShowNum配置显示，dropdown：只显示下拉菜单。`,
          description_en: `
          Operation menu display mode, default: display according to lvMaxShowNum configuration, dropdown: only display the drop-down menu.`,
          global: true,
        },
        {
          attribute: 'lvData',
          type: 'object',
          default: '--',
          description: `常用于绑定表格行数据。`,
          description_en: `Bind Table row data.`,
        },
        {
          attribute: 'lvOuterClosable',
          type: 'boolean | { includes?: string[class|id] }',
          default: 'true',
          description: `在气泡卡片外部点击时是否关闭对话框。`,
          description_en: `Whether to close the dialog when clicking outside the popover card.`,
        },
        {
          attribute: 'lvDisabled',
          type: 'boolean',
          default: 'false',
          description: `是否禁用操作菜单。`,
          description_en: `Whether to disable operation menu.`,
        },
      ],
      event: [
        {
          event: 'lvItemClick',
          parameter: `event, item`,
          description: '操作项点击事件的回调函数。',
          description_en: 'Callback function for the action item click event.',
        },
        {
          event: 'lvOpenChange',
          parameter: `isOpen, data`,
          description: '打开下拉菜单的回调函数。',
          description_en: 'Callback function for opening the drop-down menu.',
        },
      ],
    },
    {
      name: 'MenuItem Props',
      name_en: 'MenuItem Props',
      api: [
        {
          attribute: 'id',
          type: 'string',
          default: 'null',
          description: `菜单项ID，具有唯一性 (必选)`,
          description_en: `Menu item ID, unique (required)`,
        },
        {
          attribute: 'label',
          type: 'string | TemplateRef',
          default: '--',
          description: `菜单项显示的名称 (必选)`,
          description_en: `Name of menu item display (required)`,
        },
        {
          attribute: 'tips',
          type: 'string',
          default: '--',
          description: `鼠标滑过时，显示的提示信息 (可选)`,
          description_en: `Prompt message displayed when mouse over (optional)`,
        },
        {
          attribute: 'icon',
          type: 'string',
          default: '--',
          description: `菜单项的图标 (可选)`,
          description_en: `Icon for menu item (optional)`,
        },
        {
          attribute: 'divide',
          type: 'boolean',
          default: 'false',
          description: `配置后，在菜单的下方出现分隔线 (可选)`,
          description_en: `After configuration, a divider appears below the menu (optional)`,
        },
        {
          attribute: 'items',
          type: 'MenuItem[]',
          default: '--',
          description: `菜单项的子菜单定义 (可选)`,
          description_en: `Submenu definition of menu item (optional)`,
        },
        {
          attribute: 'disabled',
          type: 'boolean',
          default: 'false',
          description: `菜单项是否禁用 (可选)`,
          description_en: `Whether the menu item is disabled (optional)`,
        },
        {
          attribute: 'hidden',
          type: 'boolean',
          default: 'false',
          description: `菜单项是否隐藏 (可选)`,
          description_en: `Whether to hide the menu item (optional) `,
        },
      ],
      event: [
        {
          event: 'onClick',
          parameter: `(data) => {}`,
          description: '菜单项的左键单击事件的回调函数 (可选)',
          description_en: 'Callback function for the left-click event of the menu item (optional)',
        },
      ],
    },
  ],
};
